<template>
    <div>
        <!-- html native component -->
        <input type="submit" value="sumbit" />
        </br>
        <!-- element ui component -->
        <p> default buttons</p>
        <el-row>
            <el-button>default button</el-button>
            <el-button type="primary">main button</el-button>
            <el-button type="success">success button</el-button>
            <el-button type="info">info button</el-button>
            <el-button type="warning">warning button</el-button>
            <el-button type="danger">danger button</el-button>
        </el-row>
        </br>
        <!-- 圆角按钮 -->
        <p> rounded buttons</p>
        <el-row>
            <el-button round>default button</el-button>
            <el-button type="primary" round>main button</el-button>
            <el-button type="success" round>success button</el-button>
            <el-button type="info" round>info button</el-button>
            <el-button type="warning" round>warning button</el-button>
            <el-button type="danger" round>danger button</el-button>
        </el-row>
        </br>
        <!-- 简洁按钮 -->
        <p>plain buttons</p>
        <el-row>
            <el-button plain>default button</el-button>
            <el-button type="primary" plain>main button</el-button>
            <el-button type="success" plain>success button</el-button>
            <el-button type="info" plain>info button</el-button>
            <el-button type="warning" plain>warning button</el-button>
            <el-button type="danger" plain>danger button</el-button>
        </el-row>
        </br>
        <!-- 圆形按钮 -->
        <p> circled buttons </p>
        <el-row>
            <el-button icon="el-icon-search" circle>default</el-button>
            <el-button type="primary" icon="el-icon-edit" circle>main</el-button>
            <el-button type="success" icon="el-icon-check" circle>success</el-button>
            <el-button type="info" icon="el-icon-message" circle>info</el-button>
            <el-button type="warning" icon="el-icon-star-off" circle>warning</el-button>
            <el-button type="danger" icon="el-icon-delete" circle>danger</el-button>
        </el-row>
        </br>
    </div>
</template>

<script>
export default {
    name: "button.vue"
}
</script>
<style scoped></style>